<script setup>
	import { onMounted, ref } from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom,
		onPullDownRefresh,
		onShareAppMessage,
	} from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import { parseTime } from '@/utils/index.js'

	const detailsList = ref([])
	const currentPage=ref(1)
	async function getDetails() {
		const res = await http.request({
			url: '/api/withdrawal/withdrawalLog',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
			},
		})
		console.log(res)
		detailsList.value = [...detailsList.value,...res.data]
	}
	
	// 上拉加载
	onReachBottom(() => {
		currentPage.value++
		getDetails()
	})

	onLoad(() => {
		getDetails()
	})
</script>

<template>
	<view class="income-content">
		<view class="content-bg">
			<view
				class="income-list"
				v-for="item in detailsList"
				:key="item.id"
			>
				<view class="income-money">
					<text
						class=""
						style="font-size: 32rpx; color: #7948ea"
						v-if="item.status == 1"
						>审核中</text
					>
					<text
						class=""
						style="font-size: 32rpx; color: #ff6b26"
						v-if="item.status == 3"
						>已驳回</text
					>
					<text
						class=""
						style="font-size: 32rpx; color: #82b020"
						v-if="item.status == 2"
						>提现成功</text
					>
					<text class="" v-if="item.status == 3"
						>+{{ item.money }}</text
					>
					<text class="" v-else>-{{ item.money }}</text>
				</view>
				<view class="">
					<view
						class="order-num"
						style="margin-bottom: 0; margin-top: 30rpx"
					>
						<text
							style="
								display: block;
								width: 100%;
								text-align: right;
							"
							>{{
								`${item.bank_info.card.substring(
									0,
									6
								)}*********${item.bank_info.card.slice(-4)}`
							}}</text
						>
					</view>
					<view class="order-time" style="margin-top: 0">
						<text class=""
							>时间：{{ parseTime(item.update_time) }}</text
						>
						<text class="">{{ item.bank_info.bank_name }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.income-content {
	}
	.content-bg {
		// width: 730rpx;
		min-height: 100vh;
		padding: 0 30rpx;
		padding-bottom: 40rpx;
		background-color: #f2edfa;
		// margin: 20rpx auto;
		border-radius: 14rpx;
		display: flex;
		// justify-content: center;
		flex-direction: column;
	}

	.income-list {
		width: 100%;
		height: 184rpx;
		padding: 16rpx 0;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 14rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}
	.income-money,
	.order-num,
	.order-time {
		display: flex;
		justify-content: space-between;
		width: 85vw;
		margin: 10rpx auto;
		font-size: 36rpx;
	}
	.order-num,
	.order-time {
		font-size: 20rpx;
		color: #a6a6a6;
	}
</style>
